<template>
  <div class="d-flex flex-column my-container p-3">

<!--    <el-form ref="form" :model="searchForm" :inline="true" class="d-flex justify-content-end">-->
<!--      <el-form-item>-->
<!--        <el-input prefix-icon="el-icon-search" type="input" placeholder="请输入报文名称"-->
<!--                  clearable  @clear="searchClick"-->
<!--                  v-model="searchForm.searchInput" @keyup.enter.native="searchClick"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="mb-3">
        <el-button type="success" @click="returnUrl()">返回</el-button>
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </div>
      <div class="col d-flex over-auto">
        <el-table v-loading="loading" border :data="tableData" height="100%" ref="tableRef">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="mainCode" label="报文编码" align="center"/>
          <el-table-column prop="topicName" label="报文名称" align="center"/>
          <el-table-column prop="topicDes" label="报文描述" align="center"/>
          <el-table-column prop="topic" label="TOPIC" align="center" width="230" />
          <el-table-column label="是否启用" align="center" width="80">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.isUse == 'ON' ? 'success' : 'danger'">{{scope.row.isUse == "ON" ? "是" : "否"}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createByName" label="创建人" align="center"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="170" >
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column prop="updateByName" label="更新人" align="center"></el-table-column>
          <el-table-column label="更新时间" align="center" prop="createTime" width="170" >
            <template slot-scope="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template #default="{ row }">
              <el-button type="success" size="mini"
                         @click="handlerStatus(row)"
                         v-if="row.isUse == 'OFF'">启用
              </el-button>
              <el-button type="danger" size="mini"
                         @click="handlerStatus(row)"
                         v-else>禁用
              </el-button>
<!--              <el-button type="primary" size="mini" @click="handleLook(row)">查看</el-button>-->
<!--              <el-button type="warning" size="mini" v-permission="'DEV_PROTOCOL_BW_EDIT'" @click="openConfigDialog(row)">配置</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination class="pagination" :total="count" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="pagination"/>
    </div>

    <!-- 弹框 -->
    <yc-dialog ref="ycDialog" dialogTitle="配置" centerTitle="配置">
      <template #content>
        <div class="dialog-content">
          <el-form ref="configFormRef" :rules="rules" :model="configForm" label-width="100px">
<!--            <el-form-item label="协议名称" prop="agreementCode">-->
<!--              <el-select v-model="configForm.agreementCode" style="width: 100%;">-->
<!--                <el-option v-for="item in agreementCodeList" :key="item.agreementCode"-->
<!--                           :label="item.agreementName" :value="item.agreementCode"/>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
            <el-form-item v-if="isWaitTimeShow == '0'" label="心跳时间(s)" prop="waitTime">
<!--              <el-input v-model="configForm.waitTime" type="number"/>-->
              <el-input-number v-model="configForm.waitTime" :precision="0" controls-position="right" :min="0" style="width: 50%;"></el-input-number>
            </el-form-item>
            <el-form-item v-if="isWaitTimeShow == '0'" label="是否启用" prop="isUse">
              <el-select v-model="configForm.isUse" style="width: 100%;">
                <el-option v-for="item in isUseList" :key="item.value" :label="item.label"
                           :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="是否转发" prop="dataTrans">
              <el-select v-model="configForm.dataTrans" style="width: 100%;">
                <el-option v-for="item in isDataTrans" :key="item.value" :label="item.label"
                           :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="saveConfigBtn">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <!-- 封装操作后弹框 -->
    <global-message v-if="isGlobalMessageShow" @receive="receive" :message="message"/>
  </div>
</template>

<script>
  import {
    queryPageTopicMain,
    deactivateBTopicMain,
    updateTopicMain
  } from "@/api/settingManagement/protocolMessage"
  import ycDialog from "@/components/pageDialog"
  import { deactivate } from "@/api/userControl/account"

  export default {
    data() {
      return {
        isGlobalMessageShow: false,
        messageTitleDes: "",
        message: "",
        messageBoxSaveShow: false,
        tableData: [],
        loading: false,
        centerTitle: "",
        configForm: {
          configCode: "",
          // agreementCode: "",
          waitTime: 0,
          isUse: "",
          dataTrans: ""
        },
        rules: {
          // agreementCode: [{
          //   required: true,
          //   message: "请选择协议名称",
          //   trigger: "change"
          // }],
          waitTime: [{
            required: true,
            message: "请输入心跳时间",
            trigger: "blur"
          }],
          isUse: [{
            required: true,
            message: "请选择是否启用",
            trigger: "change"
          }],
          dataTrans: [{
            required: true,
            message: "请选择是否启用",
            trigger: "change"
          }]
        },
        isUseList: [{
          value: "ON",
          label: "是"
        },
          {
            value: "OFF",
            label: "否"
          }
        ],
        isDataTrans: [{
          value: "Y",
          label: "是"
        },
          {
            value: "N",
            label: "否"
          }
        ],
        // agreementCodeList: [],
        isWaitTimeShow: "",
        searchForm: {
          searchInput: ""
        },
        pageIndex: 1,
        pageSize: 20,
        count: 0,
        deviceCode: ""
      }
    },
    components: {
      ycDialog
    },
    created() {
      this.deviceCode = this.$route.query.deviceCode
      this.queryBTopicMainList()
    },
    methods: {
      // 查询协议报文list
      queryBTopicMainList(pageIndex = 1, pageSize = 20) {
        this.loading = true
        const {
          searchInput
        } = this.searchForm
        queryPageTopicMain({
          pageIndex,
          pageSize,
          deviceCode: this.deviceCode,
          topicName: searchInput
        }).then(res => {
          this.tableData = res.object.data
          this.count = res.object.count
        }).finally(() => {
          this.loading = false
        })
      },
      // 分页
      pagination(pageItem) {
        this.queryBTopicMainList(pageItem.page, pageItem.limit)
      },
      // 模糊查询
      async searchClick() {
        this.queryBTopicMainList(1, 20)
      },

      /**
       * 启用或者禁用按钮
       */
      async handlerStatus({ id, isUse }) {
        const confirmMessageMap = isUse == 'ON' ? "确定禁用吗" : "确定启用吗"
        this.$confirm(confirmMessageMap, "禁用/启用操作", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }).then(async () => {
          const {
            message,
            status
          } = await updateTopicMain({
            id,
            isUse: isUse=="OFF"?'ON':'OFF'
          })
          if (status == "200") {
            this.queryBTopicMainList()
            this.isGlobalMessageShow = true
            this.message = "success"
          }
        })
      },




      // 查看
      handleLook(row) {
        this.$router.push({
          path: "/protocolMessage/protocolMessageDetail",
          query: {
            configCode: row.configCode
          }
        })
      },
      // 配置
      openConfigDialog(row) {
        if (this.$refs["configFormRef"]) {
          this.$refs["configFormRef"].resetFields()
        }
        let rowData = {
          ...row
        }
        if (rowData) {
          if (rowData.subType == "SX_CD" || rowData.subType == "SX_SD") {
            this.isWaitTimeShow = 0
          } else if (rowData.subType == "SX_FD" || rowData.subType == "SX_ED") {
            this.isWaitTimeShow = 1
          } else {
            this.isWaitTimeShow = 2
          }
          // this.isWaitTimeShow = rowData.subType == "SX_CD" || rowData.subType == "SX_SD"
          this.configForm.configCode = rowData.configCode
          // this.configForm.agreementCode = rowData.agreementCode
          this.configForm.waitTime = rowData.waitTime
          this.configForm.isUse = rowData.isUse
          this.configForm.dataTrans = rowData.dataTrans
        }

        // queryAllAgreement().then(res => {
        //   this.agreementCodeList = res.object
        // })
        this.$refs.ycDialog.dialogVisible = true
      },
      // 配置保存按钮
      saveConfigBtn() {
        this.$refs["configFormRef"].validate((valid) => {
          if (valid) {
            // this.configForm.configCode = this.configCode
            deactivateBTopicMain(this.configForm).then(res => {
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: res.message
                })
                this.queryBTopicMainList()
                this.$refs.ycDialog.dialogVisible = false
              }
            })
          }
        })
      },
      /**
       * 刷新
       */
      refresh() {
        this.searchForm = {
          searchInput: ""
        }
        this.queryBTopicMainList()
      },
      returnUrl () {
        this.$router.go(-1)
      },
      /**
       * globalMessage的知道按钮的方法
       * */
      receive() {
        this.isGlobalMessageShow = false
      },
      async messageBoxSave(show) {
        this.messageBoxSaveShow = show
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pagination {
    display: flex;
    justify-content: flex-end;
  }
</style>
